<template>
  <layout title="flex布局">

    <layout-content title="比例布局">
      <view class="tn-flex-column">
        <view class="tn-flex-row fix-width__wrap">
          <view class="flex-size-block animation tn-flex-1 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
          <view class="flex-size-block animation--right tn-flex-1 tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
        </view>
        <view class="tn-flex-row fix-width__wrap tn-margin-top-sm">
          <view class="flex-size-block animation tn-flex-1 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
          <view class="flex-size-block animation--right tn-flex-2 tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
        </view>
        <view class="tn-flex-row fix-width__wrap tn-margin-top-sm">
          <view class="flex-size-block animation tn-flex-1 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
          <view class="flex-size-block animation--right tn-flex-6 tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
        </view>
        <view class="tn-flex-row fix-width__wrap tn-margin-top-sm">
          <view class="flex-size-block animation tn-flex-1 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
          <view class="flex-size-block animation--right tn-flex-11 tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
    </layout-content>
    
    <layout-content title="动态宽度">
      <view class="tn-flex-column">
        <view class="flex-size-block animation tn-col-1 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-2 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-3 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-4 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-5 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-6 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-7 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-8 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-9 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-10 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-11 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block animation tn-col-12 tn-margin-top-sm tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
      </view>
    </layout-content>

    <layout-content title="水平对齐">
      <view class="tn-flex-column">
        <view>
          <view class="tn-flex-center tn-color-grey">col-start</view>
          <view class="tn-flex-row tn-flex-col-start tn-margin-top-sm">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">col-center</view>
          <view class="tn-flex-row tn-flex-col-center tn-margin-top-sm">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">col-end</view>
          <view class="tn-flex-row tn-flex-col-end tn-margin-top-sm">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">col-around</view>
          <view class="tn-flex-row tn-flex-col-around tn-margin-top-sm">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">col-between</view>
          <view class="tn-flex-row tn-flex-col-between tn-margin-top-sm">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
      </view>
    </layout-content>

    <layout-content title="垂直对齐">
      <view class="tn-flex-column">
        <view>
          <view class="tn-flex-center tn-color-grey">row-start</view>
          <view class="tn-flex-row">
            <view class="flex-size-block tn-col-2 lg animation tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="tn-flex-row-start tn-col-2 tn-margin-left-sm">
              <view class="flex-size-block tn-col-11 animation tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
            </view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">row-center</view>
          <view class="tn-flex-row">
            <view class="flex-size-block tn-col-2 lg animation tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="tn-flex-row-center tn-col-2 tn-margin-left-sm">
              <view class="flex-size-block tn-col-11 animation tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
            </view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">row-end</view>
          <view class="tn-flex-row">
            <view class="flex-size-block tn-col-2 lg animation tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="tn-flex-row-end tn-col-2 tn-margin-left-sm">
              <view class="flex-size-block tn-col-11 animation tn-cool-bg-6 tn-radius tn-shadow-blur"></view>
            </view>
          </view>
        </view>
        
      </view>
    </layout-content>

    <layout-content title="混合对齐方式">
      <view class="tn-flex-column">
        <view>
          <view class="tn-flex-center tn-color-grey">center</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">start-start</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-start-start">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">start-center</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-start-center">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">start-around</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-start-around">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">start-between</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-start-between">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">start-end</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-start-end">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>

        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">center-start</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center-start">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">center-center</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center-center">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">center-around</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center-around">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">center-between</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center-between">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">center-end</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-center-end">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>

        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">end-start</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-end-start">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">end-center</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-end-center">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">end-around</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-end-around">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">end-between</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-end-between">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">end-end</view>
          <view class="flex-size-block lg tn-bg-gray--light tn-flex-row tn-flex-end-end">
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-2 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>

        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">around-start</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-around-start">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">around-center</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-around-center">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">around-around</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-around-around">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">around-between</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-around-between">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">around-end</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-around-end">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>

        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">between-start</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-between-start">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">between-center</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-between-center">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">between-around</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-between-around">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">between-between</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-between-between">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        <view class="tn-margin-top">
          <view class="tn-flex-center tn-color-grey">between-end</view>
          <view class="flex-size-block xl tn-bg-gray--light tn-flex-row tn-flex-wrap tn-flex-between-end">
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur tn-margin-right-sm"></view>
            <view class="flex-size-block animation tn-col-4 tn-cool-bg-2 tn-radius tn-shadow-blur"></view>
          </view>
        </view>
        
      </view>
    </layout-content>

    <layout-content title="示例演示">
      <view class="tn-flex-row">
        <view class="flex-size-block xl striped tn-flex-2 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block xl striped tn-flex-6 tn-flex-column tn-flex-start-between tn-margin-left-sm">
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
      <view class="tn-flex-row tn-margin-top">
        <view class="flex-size-block xl striped tn-flex-1 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block xl striped tn-flex-1 tn-flex-column tn-flex-start-between tn-margin-left-sm">
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
      <view class="tn-flex-row tn-margin-top">
        <view class="flex-size-block xl striped tn-flex-3 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block xl striped tn-flex-1 tn-flex-column tn-flex-start-between tn-margin-left-sm">
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
      <view class="tn-flex-row tn-margin-top">
        <view class="flex-size-block xl striped tn-flex-1 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block xl striped tn-flex-2 tn-flex-row tn-flex-wrap tn-flex-between-around tn-margin-left-sm">
          <view class="flex-size-block striped tn-col-5 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-5 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-5 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block striped tn-col-5 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
      <view class="tn-flex-row tn-margin-top">
        <view class="flex-size-block xl striped tn-flex-1 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        <view class="flex-size-block xl striped tn-flex-3 tn-flex-column tn-flex-col-between tn-margin-left-sm">
          <view class="flex-size-block md tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
          <view class="flex-size-block sm tn-col-12 tn-cool-bg-8 tn-radius tn-shadow-blur"></view>
        </view>
      </view>
    </layout-content>

  </layout>
</template>

<script lang="ts" setup>
import {} from 'vue'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
</script>

<style lang="scss" scoped>

.flex-size-block {
  height: 60rpx;

  &.ssm {
    height: 20rpx;
  }
  &.sm {
    height: 40rpx;
  }
  &.md {
    height: 80rpx
  }
  &.lg {
    height: 120rpx;
  }
  &.xl {
    height: 160rpx;
  }

  &.animation {
    animation: enterAnimation 0.5s ease-out 1;
  }
  &.animation--right {
    animation: enterRightAnimation 0.5s ease-out 1;
  }
  &.striped {
    background-size: 200% 200%;
    animation: stripedAnimation 1.5s linear infinite alternate;
  }
}
.fix-width__wrap {
  width: 100%;
}

@keyframes enterAnimation {
  0% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes enterRightAnimation {
  0% {
    transform: translateX(300%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes stripedAnimation {
  0% {
    background-position: top left;
  }
  100% {
    background-position: bottom right;
  }
}
</style>
